<template>
  <div :id="props.id" :style="{ width: '100%', height: '100%'}"></div>
</template>

<script  setup>
import {reactive, onMounted, defineProps, watch, ref} from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  chartData: {
    type: Array,
    default: () => []
  },
  id: {
    type:  String,
    default: () => 'myChartShip1'
  }
})
const datas = ref([])
watch(() => props.chartData, (newVal) => {
  newData(newVal)
})
const newData = (arr) => {
  if (arr && arr.length > 0) {
    arr.map(item => {
      datas.value.push(Object.assign({}, item, {
        name:  item.sourceName,
        value: item.sourceCount
      }))
    })
  }
  initeCharts()
}
console.log('真实的数据', datas.value)
const state = reactive({
  option: {
    // background: '#fff',
    // title: {
    //   text: 'LNG船船龄分布',
    //   left: '45%',
    //   textAlign: 'center',
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    grid: {
      top: '0',
      left: '2%',
      right: '4%',
      bottom: '0%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    // legend: {
    //   orient: 'vertical',
    //   right: 10,
    //   top: 20,
    //   bottom: 20,
    // },
    series: [
      {
        name: 'ship',
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['50%', '75%'],
        height: '100%',
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: false
        },
        color: ['#4A8BFE','#F5D45C','#3BD5B3'],
        data: datas.value
      }
    ]
  },
})
const initeCharts = () => {
  let myChart2 = echarts.init(document.getElementById(props.id))
  // 绘制图表
  myChart2.setOption(state.option)
}

onMounted(() => {
  initeCharts()
})
</script>

<style scoped>

</style>
